<template>
    <div>
      <!-- 选择支付方式 -->
      <h1>选择支付方式</h1>
      <!-- 支付方式列表 -->
      <van-cell-group class="my-title">
        <!-- 微信支付 -->
        <van-cell title="微信" is-link @click="handlePayment" />
        <!-- 支付宝支付 -->
        <van-cell title="支付宝" is-link @click="handlePayment" />
        <!-- 银行卡支付 -->
        <van-cell title="银行卡" is-link @click="handlePayment" />
        <!-- 好友代付 -->
        <van-cell title="好友代付" is-link @click="handlePayment" />
      </van-cell-group>
    </div>
  </template>

<script>
// 引入vant的toast组件
import { showToast } from 'vant'

export default {
  data() {
    return {
      // 是否显示对话框
      showDialog: false
    }
  },

  methods: {
    // 处理支付方式
    handlePayment() {
      // 显示支付成功提示
      showToast(`支付成功`)
      // 显示对话框
      this.showDialog = true
    }
  }
}
</script>